<template>
  <!-- logo -->
  <div class="logo">
    <img src="../../assets/logo_opecti.png" alt="" />
    <span v-if="!$store.state.isCollapse">后台管理系统</span>
  </div>
  <el-menu
    active-text-color="#409eff"
    background-color="#1d2d36"
    :collapse-transition="false"
    :unique-opened="true"
    class="el-menu-vertical-demo"
    :default-active="$route.path"
    text-color="#fff"
    :collapse="$store.state.isCollapse"
    router
  >
    <template v-for="item in routes">
      <el-menu-item :index="item.path" :key="item.name" v-if="!item.children">
        <i :class="`iconfont ${item.meta.icon}`"></i>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" :key="item.name" v-if="item.children">
        <template #title>
          <i :class="`iconfont ${item.meta.icon}`"></i>
          <span>{{ item.meta.title }}</span>
        </template>

        <el-menu-item :index="v.path" v-for="v in item.children" :key="v.name">
          <i :class="`iconfont ${v.meta.icon}`"></i>
          <span>{{ v.meta.title }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { routerList } from "../../router/routerModule.js";

export default {
  setup() {
    const isCollapse = ref(false); // 是否展开菜单栏
    const defaultActive = ref("/home"); // 默认路由
    const routes = routerList;
    return {
      isCollapse,
      routes,
      defaultActive,
    };
  },
};
</script>

<style lang="scss">
.el-menu {
  border-right: none !important;
  .el-menu-item {
    i {
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .el-sub-menu__title {
    i {
      font-size: 20px;
      margin-right: 10px;
    }
  }
}
.logo {
  height: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  // background-color: ;
  border-bottom: 1px solid #333;
  color: #fff;
  img {
    height: 100%;
  }
}
</style>
